<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.js 样式绑定</title>
		<script src="../js/vue.min.js"></script>
		<style>
			/* .base{
				width: 100px;
				height: 100px;
			} */
			.active{
				width: 100px;
				height: 100px;
				background: green;
			}
			.text-danger{
				background: red;
			}
		</style>
	</head>
	<body>
		<!-- class 属性绑定 -->
		<!-- 将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示 -->
		<div id="app">
			<div v-bind:class="{active:isActive}"></div>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					isActive:true
				}
			})
		</script>
		<p>----------------------------------------------------------</p>
		<!-- text-danger 类背景颜色覆盖了 active 类的背景色、 -->
		<div id="app1">
			<div class="static" v-bind:class="{active:isActive,'text-danger':hasError}">
				
			</div>
		</div>
		<script>
			new Vue({
				el:'#app1',
				data:{
					isActive:true,
					hasError:true
				}
			})
		</script>
		<p>---------------------------------------------------------</p>
		<!-- text-danger 类背景颜色覆盖了 active 类的背景色 -->
		<div id="app2">
			<div v-bind:class="classObject"></div>
		</div>
		<script>
			new Vue({
				el:'#app2',
				data:{
					classObject:{
						active:true,
						'text-danger':true
					}
				}
			})
		</script>
		<p>---------------------------------------------------------------------</p>
		<!-- 在这里绑定返回对象的计算属性 -->
		<div id="app3">
		  <div v-bind:class="classObject"></div>
		</div>
		<script>
		<script>
			new Vue({
			  el: '#app3',
			  data: {
				isActive: true,
				error: {
				  value: true,
				  type: 'fatal'
				}
			  },
			  computed: {
				classObject: function () {
				  return {
			  base: true,
					active: this.isActive && !this.error.value,
					'text-danger': this.error.value && this.error.type === 'fatal',
				  }
				}
			  }
			})
		</script>
		<p>----------------------------------------------------------------</p>
		<!-- 把一个数组传给 v-bind:class -->
		<div id="app4">
			<!-- <div v-bind:class="[activeClass,errorClass]"></div> -->
			<!-- 使用三元表达式来切换列表中的 class -->
			<div v-bind:class="[errorClass,isActive ? activeClass : '']"></div>
		</div>
		<script>
			new Vue({
				el:'#app4',
				data:{
					isActive:true,
					activeClass:'active',
					errorClass:'text-danger'
				}
			})
		</script>
		<p>---------------------------------------</p>
		<!--  v-bind:style 直接设置样式 -->
		<div id="app5">
			<div v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}">菜鸟教程</div>
		</div>
		<script>
			new Vue({
				el:'#app5',
				data:{
					activeColor:'green',
					fontSize:30
				}
			})
		</script>
	</body>
</html>
